<template>
    <div class="app-container">
        <el-card
            shadow="never"
            v-show="showSearch"
            class="m-b-8 searchCard">
            <form-search :fieldList="fieldList" v-model="queryParams" @handleQuery="handleQuery"></form-search>
        </el-card>
        <el-card shadow="never" class="con-box">
            <el-row :gutter="10" class="m-b-8">
                <el-col :span="1.5">
                </el-col>
                <right-toolbar v-model:showSearch="showSearch"
                                :version="columnVersion"
                                :default-columns="defaultColumns"
                                v-model:columns="columns"
                                @queryTable="handleQuery">
                </right-toolbar>
            </el-row>
            <HighTable
                border
                ref="HighTableRef"
                v-loading="loading"
                :urlApi="getInfoApi"
                :columns="columns">
                <template #operate="{row}">
                    <el-button text type="primary" icon="View" @click="handleDetail(row)" >详情 </el-button>
                </template>
            </HighTable>
        </el-card>
    </div>
</template>
<script setup lang="ts">
import defaultColumns, {columnVersion} from "./seCtion1columns.js";
import {getInfoApi} from "@/api/module2";
import { nextTick, ref } from 'vue';

const HighTableRef = ref();

const showSearch = ref(true) // 显隐查询条件

const loading = ref(false) // 表格加载

const columns = ref([]); // 列数据

const queryParams = ref({})

const fieldList = ref([ // 可以是后端传入的数据也可以写死
    {
        displayName: '性别',
        fieldCode: 'sex',
        fieldType: 'select',
        colSpan: 6,
        props: {
            optionType: 'dict', // 自定义 custom 字典取数dict
            options: [], // custom自定义数据
            dict: 'dict_sex', // 字典值
            placeholder: '请选择'
        }
    },
    {
        displayName: '姓名',
        fieldCode: 'name',
        fieldType: 'text',
        colSpan: 6,
        placeholder: '请输入',
    }
]);

function handleQuery(){ // 查询
    console.log(queryParams.value)
    // 检索从form带过来的参数
    getList(queryParams.value)
}

function getList(query: object){
    nextTick(()=>{
        HighTableRef.value.getList(query)
    })
}
function handleDetail(row: object){ // 详情
    console.log(row)
}
</script>
<style lang="scss" scoped>
.app-container{
  display: flex;
  flex-direction: column;
  height: 100%;
  .con-box{
    flex: 1;
    overflow: auto;
  }
}
.searchCard{
  :deep(.el-card__body){
      padding: 12px !important;
  }
  :deep(.el-form-item){
      margin-bottom: 0!important;
  }
}
</style>